<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="init()">
		学号：<input type="text" /><br>
		姓名：<input type="text" />
		<button type="button" onclick="fun()">下一个</button>
	</body>
	<script type="text/javascript">
		let stus = [];
		function init(){
			let xhr = new XMLHttpRequest();
			xhr.open("GET","student.xml",false);
			xhr.send();
			let data = xhr.responseXML;
			stus = data.querySelectorAll("stu");//data代替document
			document.querySelector("input").value = stus[0].getAttribute("sno")
			document.querySelector("input~input").value = stus[0].getAttribute("sname")//~,由于存在br,使用~;属性获取数据getAttribute()
		}
		let index = 0;
		function fun(){
			index++;
			index=index%stus.length;//循环使用%
			document.querySelector("input").value = stus[index].getAttribute("sno")
			document.querySelector("input~input").value = stus[index].getAttribute("sname")
		}
	</script>
</html>
